<template>
  <div class="container">

    <van-nav-bar
      title="订单详情"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <div style="width: 100%;height: 100%;background-color: #ffffff;" v-if="xdbz == '1' ">

      <van-form >
        <van-empty
          image="https://sqyjph.oss-cn-qingdao.aliyuncs.com/quanzi/16522398639898313.png"
          image-size="80"
          description="订单提交成功"
        />
      </van-form>
    </div>

    <div v-html="printDatas">

    </div>
  </div>
</template>

<script>
import { addFhnotes, getFhnoteById } from 'api/api'
import { Toast } from 'vant'
export default {
  name: 'Success',
  data() {
    return {
      noteid: '',
      printDatas: '',
      xdbz: ''
    }
  },
  created() {
    const noteid = this.$route.query.noteid
    const xdbz = this.$route.query.xdbz
    this.xdbz = xdbz
    this.noteid = noteid
    this.getFhnoteById()
  },
  methods: {
    // 识别操作系统
    viewczxt() {
      var u = navigator.userAgent; var app = navigator.appVersion
      var isXiaomi = u.indexOf('XiaoMi') > -1 // 小米手机
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // 其它安卓
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios
      if (isAndroid) {
        return 'Android'
      } else if (isIOS) {
        if (isXiaomi) {
          return 'Android'
        } else {
          return 'Ios'
        }
      }
    },

    getFhnoteById() {
      const param = { noteid: this.noteid }
      getFhnoteById(param).then(response => {
        if (response.code === 200) {
          console.log(response)

          const list = response.data.list
          for (var i = 0; i < list.length; i++) {
            list[i].index = i
          }

          let detailHtml = ' '
          const rownum = list.length + 1
          for (var i = 0; i < list.length; i++) {
            if (i == 0) {
              detailHtml = detailHtml + '<tr>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + list[i].productname + '</span></p>\n' +
                '\t\t\t</td>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + response.data.xjje + '元/箱' + ' </span></p>\n' +
                '\t\t\t</td>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + list[i].dhsl + '箱' + '</span></p>\n' +
                '\t\t\t</td>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + list[i].dhje + '元' + '</span></p>\n' +
                '\t\t\t</td>\n' +

                '\t\t </tr>'
            } else {
              detailHtml = detailHtml + '<tr>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + list[i].productname + '</span></p>\n' +
                '\t\t\t</td>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + response.data.xjje + '元/箱' + ' </span></p>\n' +
                '\t\t\t</td>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + list[i].dhsl + '箱' + '</span></p>\n' +
                '\t\t\t</td>\n' +
                '\t\t\t<td  style=\'border:solid 1px;padding:10px;\'>\n' +
                '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + list[i].dhje + '元' + '</span></p>\n' +
                '\t\t\t</td>\n' +
                '\t\t </tr>'
            }
          }

          console.log(detailHtml)

          const content = '<html>\n' +
            '<head>\n' +
            '<style scoped>\n' +
            '@page{\n' +
            '  size: auto A4 landscape;\n' +
            '  margin: 3mm;\n' +
            '}\n' +
            '</style>\n' +
            '</head>\n' +
            '<body>\n' +
            '\t<div>\n' +
            '\t\t<table  style=\'width:90%;border-collapse:collapse;margin-left:5%;margin-right:5%;margin-top:30px;border:solid 1px;\'>\n' +
            '\t\t <tr>\n' +
            '\t\t  <td nowrap colspan=4 valign=bottom style=\'border: solid 1px;padding:10px;height:30px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><b>\n' +
            '\t\t  <span style=\'font-size:22px;\'>青岛瑞健源食品有限公司订单</span></b></p>\n' +
            '\t\t  </td>\n' +
            '\t\t </tr>\n' +
            '\t\t <tr >\n' +
            '\t\t  <td style=\'border:solid 1px;\'>\n' +
            '\t\t\t  <p style=\'text-align:center\'>\n' +
            '\t\t\t\t<span style=\'font-size:16px;\'>客户名称</span>\n' +
            '\t\t\t  </p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td colspan=3 style=\'border:solid 1px;\'>\n' +
            '\t\t  <p style=\'text-align:center;font-size: 16px;\'>\n' + response.data.custname + '</p>\n' +
            '\t\t  </td>\n' +
            '\t\t </tr>\n' +
            '\t\t <tr style=\'\'>\n' +
            '\t\t  <td style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>联系方式</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td colspan=4 style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + response.data.telephone + '</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  \n' +
            '\t\t </tr>\n' +
            '\t\t <tr>\n' +
            '\t\t\t<td  style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>订货时间</span></p>\n' +
            '\t\t\t  </td>\n' +
            '\t\t\t  <td colspan=4 style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + response.data.date + '</span></p>\n' +
            '\t\t    </td>\n' +
            '\t\t </tr>\n' +
            '\t\t <tr >\n' +
            '\t\t  <td style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>送货地址</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td colspan=4 style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + response.data.address + '</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t </tr>\n' +
            '\t\t \n' +
            '\t\t <tr >\n' +
            '\t\t  <td style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>备注</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td colspan=4 style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>\n' + response.data.bz + '</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t </tr>\n' +
            '\t\t \n' +
            '\t\t <tr>\n' +
            '\t\t  <td  style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span\n' +
            '\t\t  style=\'font-size:16px;\'>产品品项</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t\n' +
            '\t\t  <td  style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span\n' +
            '\t\t  style=\'font-size:16px;\'>箱价</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td  style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t  <p style=\'text-align:center\'><span\n' +
            '\t\t  style=\'font-size:16px;\'>数量</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t  <p style=\'text-align:center\'><span\n' +
            '\t\t  style=\'font-size:16px;\'>金额(元)</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t </tr>\n' +
            '\t\t \n' +
            '\n' + detailHtml +
            '\n' +
            '\t\t <tr >\n' +
            '\t\t  <td  style=\'border:solid 1px;padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>金额合计</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t \n' +
            '\t\t  <td  style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span style=\'font-size:16px;\'>　</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td  style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span  style=\'font-size:16px;\'>\n' + response.data.ddsl + '箱' + '</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td  style=\'border:solid 1px; padding:10px;\'>\n' +
            '\t\t  <p  style=\'text-align:center\'><span  style=\'font-size:16px;\'>&yen;\n' + response.data.ddje + '</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t </tr>\n' +
            '\t\t <tr >\n' +
            '\t\t  <td  colspan=2 style=\'border:solid 1px; padding:10px;height:57.0pt\'>\n' +
            '\t\t\t<p  style=\'text-align:left\'><span  style=\'font-size:16px;\'>&nbsp;</span><span style=\'font-size:16px;\'>运费：\n' + (response.data.cdyfbz == '1' ? '客户承担' : '厂家承担') + '</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t  <td colspan=2 style=\'border:solid 1px;padding:10px;height:57.0pt\'>\n' +
            '\t\t\t<p  style=\'text-align:left\'><span style=\'font-size: 16px;\'>\n' + response.data.zxzc + '</span></p>\n' +
            '\t\t  </td>\n' +
            '\t\t </tr>\n' +
            '\t\t</table>\n' +
            '\t</div>\n' +
            '</body>\n' +
            '</html>\n'

          this.printDatas = content
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      if (this.xdbz == '1') {
        this.$router.push({ path: '/edit', query: {}})
      } else {
        this.$router.go(-1)
      }
      //  // 返回上一层
    }

  }

}
</script>

<style scoped>

.container{
  background-color: white;
  height: auto;
}

.columnr{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.rownr{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  font-size: 16px;
}

.content{
  font-size: 16px;
  padding:10px;
  width: 80%;
}

.text{
  text-indent: 32px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
  padding-top: 10px;
  line-height: 200%;
}

.text1{
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  padding-top: 15px;
  line-height: 200%;
}

.box {
  position: relative;
  display: inline-block;
  padding-left: 12px;
}
.box .clear {
  position: absolute;
  top: 0;
  right: 0;
}

</style>
